<template>
  <div class="dynamic-table-layout" v-loading="loading">
    <div ref="toolbarAreaRef" class="toolbar-area" v-if="isToolbar">
      <g-dynamic-table-toolbar
        :json="buttonGroupsJson"
        @action-click="handleActionClick"
        @GetRefitems="setRef"
      ></g-dynamic-table-toolbar>
    </div>
    <div class="dynamic-table-content">
      <div class="search-area" ref="searchAreaRef">
        <g-dynamic-table-search
          v-model:value="searchForm"
          :json="pageFilterJson.pageFilterElements"
          @search="handleSearchClick"
        ></g-dynamic-table-search>
      </div>
      <g-dynamic-table-body
        class="body-area"
        :json="listViewJson"
        :columns="listViewJson.listViewColumns"
        :scroll="tableContentStyle"
        :tableProps="tableProps"
        :dataSources="dataSources"
        :pagination="pagination"
        :showExport="showExport"
        :showSelect="showSelect"
        :showActionBtn="showActionBtn"
        @tableChange="handleTableChange"
        @action-click="handleActionClick"
      >
        <template #headerCell="{ column }">
          <slot name="headerCell" :column="column"></slot>
        </template>
        <template #bodyCell="{ column, record }">
          <slot name="bodyCell" :column="column" :record="record"></slot>
        </template>
      </g-dynamic-table-body>
    </div>
    <!-- <list-config-modal ref="listConfigRef" :json="listViewJson" /> -->
    <!-- <column-color-config-modal ref="columnColorConfigRef" :json="listViewJson" /> -->
    <!-- <query-config-modal ref="queryConfigRef" :json="pageFilterJson" /> -->
  </div>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import IndexMixin from './mixins/index-mixin';
  export default defineComponent({
    name: 'g-dynamic-table',
    mixins: [IndexMixin],
  });
</script>
<style lang="less" scoped>
  @import './style/g-dynamic-table.less';
</style>
